body,
html {
    width: 100%;
    height: 100%;
}

body {
    // display: flex;
    color: #333;
    background-color: hsla(98, 100%, 59%, 0.383);
    min-width: 1226px;
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    .container {
        padding: 0;
        width: 1226px;
        margin-left: auto;
        margin-right: auto;
    }
    .ir {
        display: block;
        text-align: left;
        text-indent: -999em;
        overflow: hidden;
    }
}

a,
a:hover {
    text-decoration: none;
}

// 字体效果
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

// 头部
header {
    background-color: #fff;
    width: 100%;
    // 头部工具栏
    .site_topbar {
        position: relative;
        height: 40px;
        color: #b0b0b0;
        font-size: 12px;
        background: #333;
        .container {
            height: 100%;
            background-color: #333;
        }
        a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
        }
        a:hover {
            color: #ffffff;
        }
        // 左侧内容
        .topbar_nav {
            float: left;
            height: 40px;
            line-height: 40px;
            background: #333333;
            .sSpan {
                margin: 0 0.3em;
                color: #424242;
                font-family: sans-serif
            }
            // 下载选项移入下拉 
            .download {
                .appCode {
                    z-index: 30;
                    position: absolute;
                    top: 40px;
                    left: 50%;
                    width: 124px;
                    height: 0;
                    background: #fff;
                    margin-left: -55px;
                    box-shadow: 0 1px 5px #aaa;
                    text-align: center;
                    font-size: 14px;
                    color: #333;
                    line-height: 1;
                    overflow: hidden;
                    transition: height .3s;
                }
                img {
                    display: block;
                    margin: 18px auto 12px;
                }
            }
        }
        // 购物车
        .topbar-cart {
            position: relative;
            float: right;
            width: 120px;
            height: 40px;
            margin-left: 15px;
            animation: all 0.2s;
            font-size: 12px;
            background: cyan;
            // 显示的内容，移入出现下移内容
            .cart-content {
                position: relative;
                display: block;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #b0b0b0;
                background: #424242;
                svg {
                    margin-right: 4px;
                    font-size: 18px;
                    line-height: 20px;
                    vertical-align: -4px;
                }
            }
            .cart-content.active {
                color: #ff6700;
                background: #fff;
            }
            .cart-menu {
                position: absolute;
                z-index: 30;
                top: 40px;
                right: 0;
                width: 316px;
                background: #fff;
                color: #424242;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 15%);
                overflow: hidden;
                transition: height 0.3s;
                .menu-content {
                    padding: 20px 0 0;
                }
                .loading {
                    margin: 0 20px 20px;
                    text-align: center;
                }
            }
        }
        // 登录注册
        .topbar-info {
            position: relative;
            float: right;
            height: 40px;
            line-height: 40px;
            background: #333;
            .link {
                padding: 0 5px;
                text-align: center;
            }
            .sSpan {
                margin: 0;
                color: #424242;
                font-family: sans-serif
            }
            .message {
                // float: ;
                padding: 0 10px;
            }
        }
    }
    // 头部导航
    .heater_title {
        position: relative;
        z-index: 20;
        height: 100px;
        .container {
            background: #fff;
        }
        .heater-log {
            float: left;
            width: 62px;
            margin-top: 22px;
            // background-color: #f25807;
        }
        // 小米标识
        .logo {
            display: block;
            position: relative;
            left: 0;
            top: 0;
            width: 56px;
            height: 56px;
            margin-right: 20px;
            background: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
            background-size: 56px;
            overflow: hidden;
        }
        // 导航内容
        .heater-nav {
            float: left;
            width: 850px;
        }
        // ul标签
        .nav-list {
            box-sizing: content-box;
            position: relative;
            z-index: 20;
            float: left;
            width: 1100px;
            height: 88px;
            margin: 0;
            padding: 12px 0 0 30px;
            list-style-type: none;
            font-size: 16px;
            // background-color: blue;
        }
        // 全部商品分类
        .nav-category {
            box-sizing: content-box;
            position: relative;
            float: left;
            width: 127px;
            padding-right: 15px;
            .link-category {
                display: block;
                padding: 26px 0 38px;
                text-align: right;
                color: #333;
                text-align: center;
                // visibility: hidden;
            }
        }
        // 内容li标签
        .item,
        .item1 {
            float: left;
            .link {
                display: block;
                padding: 26px 10px 38px;
                color: #333;
                transition: color 0.2s;
            }
        }
        .text {
            transition: color 0.2s;
        }
        .nav-list li:hover .text {
            color: #ff6700;
        }
        .nav-list li.nav-category:hover .text {
            color: #333;
        }
        // 导航下移内容
        .item-children {
            position: absolute;
            z-index: 30;
            left: 0;
            top: 100px;
            width: 100%;
            height: 0;
            background-color: #fff;
            border-top: 1px solid #b0b0b0;
            overflow: hidden;
            .contentUL {
                margin: 0;
                padding: 0;
                list-style: none;
                font-size: 12px;
                display: none;
            }
            .li-nav {
                box-sizing: content-box;
                display: list-item;
                position: relative;
                float: left;
                width: 180px;
                padding: 35px 12px 0;
                text-align: center;
            }
            .li-nav:before {
                content: '';
                position: absolute;
                left: auto;
                bottom: auto;
                right: 0;
                height: 110px;
                width: 1px;
                background-color: #e0e0e0;
            }
            .li-nav:last-child:before {
                content: '';
                background-color: #fff;
            }
            .li-nav .active {
                color: #ff7f00;
            }
            .figure {
                width: 100%;
                margin: 0 auto 16px;
                text-align: center;
                img {
                    width: 180px;
                    height: 110px;
                }
            }
            .title {
                color: #333;
                line-height: 20px;
                margin: 0;
            }
            p {
                margin: 0;
                line-height: 20px;
                color: #ff6700;
            }
        }
        // 导航搜索栏
        .heater-search {
            float: right;
            width: 296px;
            margin-top: 25px;
        }
        .search-form {
            position: relative;
            width: 296px;
            height: 50px;
            z-index: 15;
        }
        .search-text {
            position: absolute;
            top: 0;
            right: 51px;
            border: 1px solid #e0e0e0;
            outline: 0;
            transition: all 0.2s;
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
        }
        .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            width: 52px;
            height: 48px;
            font-size: 24px;
            line-height: 24px;
            background: #fff;
            color: #616161;
            border: 1px solid #e0e0e0;
            outline: 0;
            transition: all 0.2s;
        }
        svg {
            position: absolute;
            right: 16px;
            top: 15px;
            z-index: 3;
            font-size: 20px;
            font-weight: 600;
            color: #616161;
        }
        .search-form:hover input {
            border: #b0b0b0 1px solid;
        }
        .search-form:active input {
            border: #ff6700 1px solid;
        }
        .search-btn:hover {
            background: #ff6700;
        }
        .search-form a:hover .icon {
            color: #fff;
        }
    }
}

// 导航
// nav {
//     background-color: #f25807;
// }
// 主体
main {
    margin: 0;
    background-color: #f5f5f5;
    .container {
        width: 100%;
    }
    .container-main {
        position: relative;
    }
    .breadcrumbs {
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        background: #f5f5f5;
        color: #757575;
        .container {
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .sep {
            margin: 0 0.5em;
            color: #b0b0b0;
        }
        a {
            color: #757575;
        }
        a:hover {
            color: #fe6700;
        }
    }
    .search-filter {
        background: #fff;
        height: 100%;
        .filter-wrap {
            margin: 0 auto;
            width: 1226px;
            padding: 18px 0;
        }
        .show-less {
            position: relative;
            overflow: hidden;
            padding: 0 60px 0 124px;
            margin: 0;
            list-style: none;
            font-size: 0;
            height: 48px;
            z-index: 15;
            .label {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                color: #b0b0b0;
                height: 20px;
                line-height: 20px;
                padding: 14px 0;
                font-size: 14px;
            }
            li {
                display: inline-block;
                text-overflow: ellipsis;
                color: #424242;
                font-size: 14px;
                width: 148px;
                padding: 14px 0;
                height: 20px;
                line-height: 20px;
            }
            .active {
                color: #ff6600;
            }
            a {
                width: 148px;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #424242;
            }
            a:hover {
                color: #ff6600;
            }
            .more-btn {
                position: absolute;
                z-index: 1;
                height: 20px;
                line-height: 20px;
                padding: 14px 0;
                font-size: 14px;
                cursor: pointer;
                color: #757575;
                right: 0;
                top: 0;
            }
        }
    }
    .search-result {
        padding: 20px 0 100px;
        .reuslt-order {
            position: relative;
            margin: 0 auto;
            width: 1226px;
        }
        .order-list {
            position: relative;
            height: 30px;
            margin: 20px 0;
        }
        .order-list-ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            float: left;
            height: 30px;
            line-height: 30px;
            li {
                float: left;
                padding: 0 30px;
                border-right: 1px solid #e0e0e0;
                line-height: 20px;
            }
            li:last-child {
                border-right: none;
            }
            a {
                color: #424242;
            }
            .active {
                color: #ff7f00;
            }
            a:hover {
                color: #ff7f00;
            }
        }
        .goods-list-box {
            width: 1226px;
            .goods-list {
                width: 1240px;
                // overflow: hidden;
                margin: 0;
            }
            .goods-item {
                position: relative;
                float: left;
                width: 296px;
                height: 430px;
                margin-right: 14px;
                margin-bottom: 14px;
                text-align: center;
                background: #fff;
                transition: box-shadow .5s linear, -webkit-box-shadow .5s linear;
                a {
                    display: block;
                    padding-top: 47px;
                    box-sizing: border-box;
                    height: 100%;
                    cursor: pointer;
                }
                .figure-img {
                    width: 200px;
                    height: 200px;
                    margin: 0 auto 16px;
                }
                img {
                    width: 200px;
                    height: 200px;
                }
                p {
                    margin: 0 auto;
                    width: 230px;
                    font-size: 14px;
                    font-weight: 400;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    color: #757575;
                }
                span {
                    margin: 0 0 15px;
                    color: #ff6700;
                    display: inline-block;
                }
                .thumbs {
                    width: 100%;
                    height: 37px;
                    overflow: hidden;
                }
                .thumb-list {
                    display: inline-block;
                    width: 34px;
                    height: 34px;
                    margin: 0 4px;
                    border: 1px solid #e0e0e0;
                    cursor: pointer;
                    transition: border-color .2s linear;
                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
            }
            .goods-item:hover {
                box-shadow: 0 2px 13px 2px rgba(176, 176, 176, 0.5);
            }
            .goods-item:hover p {
                color: #ff6700;
            }
        }
    }
}

// 底部 ok
footer {
    background-color: deeppink;
    width: 100%;
    // 一.底部站点
    .site-footer {
        background: #fff;
    }
    // 底部服务系统
    .footer-service {
        padding: 27px 0;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;
        .list-service {
            margin: 0;
            padding: 0;
            li {
                float: left;
                width: 19.8%;
                height: 25px;
                font-size: 16px;
                line-height: 25px;
                text-align: center;
                border-right: 1px solid #e0e0e0;
            }
            li:nth-child(5) {
                border-right: none;
            }
            a {
                color: #616161;
                transition: color 0.2s;
            }
            a:hover {
                color: #ff6700;
            }
            svg {
                font-size: 24px;
                margin-right: 6px;
                line-height: 24px;
                vertical-align: -4px;
            }
        }
    }
    // 底部服务部分
    .footer-links {
        padding: 40px 0;
        background: #fff;
        // 底部自定义列表
        .col-links {
            width: 160px;
            margin: 0;
            float: left;
            dt {
                margin: -1px 0 26px;
                font-size: 14px;
                line-height: 1.25;
                color: #424242;
                font-weight: 400;
            }
            dd {
                font-size: 12px;
                margin: 10px 0 0;
            }
            a {
                background: rgba(0, 0, 0, 0);
                text-decoration: none;
                color: #757575;
            }
            a:hover {
                color: #ff6700;
            }
        }
        // 联系方式
        .col-contact {
            float: right;
            width: 251px;
            border-left: 1px solid #e0e0e0;
            text-align: center;
            color: #616161;
            p {
                margin: 0 0 5px 0;
                font-size: 12px;
            }
            .phone {
                margin: 0 0 5px 0;
                font-size: 22px;
                line-height: 1;
                color: #ff6700;
            }
            .btn {
                display: inline-block;
                width: 158px;
                height: 38px;
                padding: 0;
                margin: 0;
                border: 1px solid #b0b0b0;
                font-size: 14px;
                line-height: 38px;
                text-align: center;
                color: #b0b0b0;
                cursor: pointer;
                -webkit-transition: all .4s;
                transition: all .4s;
            }
            .btn-small {
                width: 118px;
                height: 28px;
                font-size: 12px;
                line-height: 28px;
            }
            .btn-line-primary {
                border-color: #ff6700;
                background: #fff;
                color: #ff6700;
            }
            a:active,
            a:hover {
                outline: 0;
            }
            .btn-line-primary:hover {
                color: #fff;
                background-color: #f25807;
                border-color: #f25807;
            }
            svg {
                font-size: 14px;
            }
            .follow {
                font-size: 12px;
                margin-top: 10px;
                position: relative;
            }
            .follow a {
                color: #757575;
                width: 24px;
                height: 24px;
                display: inline-block;
                vertical-align: middle;
                margin-left: 6px;
                margin-top: -3px;
            }
            .follow .wb {
                background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png) 50% 0 no-repeat;
                background-size: cover;
            }
            .follow .wb:hover {
                background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb@2x.png);
            }
            .follow .wx {
                background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png) 50% 0 no-repeat;
                background-size: cover;
            }
            .follow .wx:hover {
                background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx@2x.png);
            }
            .follow img {
                width: 126px;
                height: 126px;
                position: absolute;
                left: 100px;
                top: 20px;
                z-index: 2;
            }
        }
    }
    // 二.最底部标语
    .footer-info {
        padding: 30px 0;
        font-size: 12px;
        background-color: #fafafa;
        .container {
            // background-color: deepskyblue;
            position: relative;
        }
        .logo {
            position: absolute;
            left: 0;
            top: 0;
            width: 56px;
            height: 56px;
            margin-right: 20px;
            background: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
            background-size: 56px;
        }
        .info-text {
            color: #b0b0b0;
            padding: 0 77px;
            p {
                margin: 0;
                line-height: 18px;
            }
            p:nth-child(3) a {
                color: #b0b0b0;
            }
            p:nth-child(3) a:hover {
                color: #fe6700;
            }
            a {
                color: #757575;
            }
            a:hover {
                color: #fe6700;
            }
        }
        .info-links {
            height: 28px;
            margin: 4px 0 15px;
            padding: 0 77px;
            a {
                display: inline-block;
                height: 28px;
                overflow: hidden;
                margin-left: 5px;
                position: relative;
                img {
                    width: auto;
                    height: 28px;
                    margin-left: 0;
                }
            }
            .safe-auth {
                width: 150px;
                height: 28px;
                overflow: hidden;
                margin-left: 5px;
                position: relative;
                img {
                    height: 28px;
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: #fff;
                }
                .img2 {
                    display: none;
                }
            }
            .active {
                opacity: 0;
            }
        }
        // 最底部标语
        .slogan {
            cursor: both;
            margin: 30px auto 0;
            width: 100%;
            height: 19px;
            background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png) no-repeat center 0;
        }
    }
}